<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <p>{{ msg }}</p>

        <div>
            {{ message }}
        </div>
        <!-- v-text 不做解析直接渲染 -->
        <div v-text="message"></div>

        <!-- v-html 该指令是用来解析标签和样式用的 -->
        <!-- 在 vue 中使用 v- 开头的属性叫做指令 -->
        <div v-html="message"></div>

        <!-- v-bind: 是用来给标签绑定属性用的 -->
        <p v-bind:id="myid" v-bind:title="title">具有 id 的 p 标签</p>

        <!-- : 冒号是 v-bind 的简写 -->
        <p :class="myclass">具有 class 属性的 p 标签</p>

        <!-- v-on 是用来监听事件用的 -->
        <button v-on:click="count++"> 点击增加 {{count}} </button>
        <!-- @ 是 v-on 的简写 -->
        <button @click="count++"> 点击增加 {{count}} </button>


        <!-- v-if 当条件成立时会显示该标签 -->
        <div v-if="flag">flag 为真</div>
        <!-- <span></span> -->
        <!-- v-else/v-else-if 中间不能有其他标签 -->
        <div v-else-if="flag == '111111'">flag 为111111</div>
        <div v-else>flag 为假</div>
        <button @click="flag = !flag">切换 flag</button>

        <ul>
            <!-- v-for 用来做循环用的 -->
            <li v-for="item in list"> {{ item }} </li>
        </ul>

        <button @click="addItem">点击在 list 中添加内容</button>

        <!-- 动态属性 -->
        <a :[attr]="url">求点击</a>

        <!-- 
            js 表达式
            {{}} 双大括号中的内容为 js 表达式
            通过 v-bind:class=''  此时引号内的内容是 js 表达式
         -->
    </div>
</body>
<script>


    const app = Vue.createApp({
        // data 选项中放的是 数据  状态
        data () {
            return {
                msg: '成大事者不拘小节，但是首先，你得能成大事',
                message: '<h1 style="color: red">成大事者不拘小节</h1>',
                myid: 'bpp',
                title: '你好世界',
                myclass: 'box',
                count: 100,
                flag: false,
                list: [
                    '摇一摇',
                    '晃一晃',
                    '扭一扭',
                    '舔一舔',
                    '泡一泡'
                ],
                url: 'https://www.jd.com',
                attr: 'href'
            }
        },
        // methods 选项是用来放函数的地方
        methods: {
            addItem () {
                // alert('被点击了')
                console.log(this.list);
                this.list.push('奥利奥')
            }
        },
    })

    const vm = app.mount('#app')


</script>

</html>